// src/components/LoadingProvider.tsx
import React, { createContext, useContext, useState, ReactNode } from "react";

// 引入你的 SVG 小动物
import BlackCat from "../assets/loading/black_cat.svg";
import BlueCat from "../assets/loading/blue_cat.svg";
import BorderCollie from "../assets/loading/border_collie.svg";
import CalicoCat from "../assets/loading/calico_cat.svg";
import Corgi from "../assets/loading/corgi.svg";
import CowCat from "../assets/loading/cow_cat.svg";
import Dachshund from "../assets/loading/dachshund.svg";
import FrenchBulldog from "../assets/loading/french_bulldog.svg";
import GingerCat from "../assets/loading/ginger_cat.svg";
import Golden from "../assets/loading/golden.svg";
import GuineaPig from "../assets/loading/guinea_pig.svg";
import HairlessCat from "../assets/loading/hairless_cat.svg";
import Hamster from "../assets/loading/hamster.svg";
import Husky from "../assets/loading/husky.svg";
import PastoralDog from "../assets/loading/pastoral_dog.svg";
import Psyduck from "../assets/loading/psyduck.svg";
import Ragdoll from "../assets/loading/ragdoll.svg";
import Sheep from "../assets/loading/sheep.svg";
import ShibaInu from "../assets/loading/shiba_lnu.svg";
import SiameseCat from "../assets/loading/siamese_cat.svg";
import TibetanMastiff from "../assets/loading/tibetan_mastiff.svg";
import WithCat from "../assets/loading/with_cat.svg";


type LoadingOptions = {
  text?: string;
  icon?: ReactNode;
  iconStyle?: React.CSSProperties; // 可传入自定义样式
};

type LoadingContextType = {
  showLoading: (options?: LoadingOptions) => void;
  hideLoading: () => void;
};

const LoadingContext = createContext<LoadingContextType | null>(null);

const AnimatedIconsRow: React.FC = () => {
  const allIcons = [
    BlackCat, BlueCat, BorderCollie, CalicoCat, Corgi, CowCat, Dachshund,
    FrenchBulldog, GingerCat, Golden, GuineaPig, HairlessCat, Hamster, Husky,
    PastoralDog, Psyduck, Ragdoll, Sheep, ShibaInu, SiameseCat, TibetanMastiff, WithCat,
  ];

  // 随机取6个图标
  const randomIcons = React.useMemo(() => {
    const shuffled = [...allIcons].sort(() => 0.5 - Math.random());
    return shuffled.slice(0, 6);
  }, []); // 只在组件挂载时生成一次

  return (
    <div style={{ display: "flex", gap: 20 }}>
      {randomIcons.map((icon, idx) => (
        <img
          key={idx}
          src={icon}
          alt={`loading-${idx}`}
          style={{
            width: 40,
            height: 40,
            animation: `jump 1.5s ease-in-out ${idx * 0.3}s infinite`,
          }}
        />
      ))}
      <style>
        {`
          @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
          }
        `}
      </style>
    </div>
  );
};

export const LoadingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [loading, setLoading] = useState(false);
  const [text, setText] = useState<string>("");
  const [icon, setIcon] = useState<ReactNode | null>(null);
  const [iconStyle, setIconStyle] = useState<React.CSSProperties | undefined>(undefined);

  const showLoading = (options?: LoadingOptions) => {
    if (options?.text) setText(options.text);
    if (options?.icon) setIcon(options.icon);
    else setIcon(null); // 没传 icon 使用默认
    if (options?.iconStyle) setIconStyle(options.iconStyle);
    else setIconStyle(undefined);
    setLoading(true);
  };

  const hideLoading = () => {
    setLoading(false);
    setText("加载中...");
    setIcon(null);
    setIconStyle(undefined);
  };

  return (
    <LoadingContext.Provider value={{ showLoading, hideLoading }}>
      {children}
      {loading && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(255,255,255,0.8)",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            zIndex: 2000,
          }}
        >
          <div style={iconStyle}>
            {icon || <AnimatedIconsRow />}
          </div>
          <p style={{ marginTop: 16, fontSize: 18, color: "#333" }}>{text}</p>
        </div>
      )}
    </LoadingContext.Provider>
  );
};

export const useLoading = () => {
  const ctx = useContext(LoadingContext);
  if (!ctx) throw new Error("useLoading must be used within LoadingProvider");
  return ctx;
};

export default LoadingProvider;
